Content with HTML

HTML is a con­tent and struc­ture lan­guage for mak­ing web­sites. There are some fixed parts that are the same or similar to most web­sites. For this les­son, we'll be using this basic struc­ture:

<!DOCTYPE html>
<html>
  <head>
    <title>First website</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.2.5/plugins.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    ...

    <script src="javascript.js"></script>
  </body>
</html>

All of the ele­ments that we will see later on will go in­side <body> ... </body> in the layout above. We won't write the whole struc­ture for the tutori­al later on to keep the code tidy, but you should in­clude it when try­ing it out. Just replace those "..." for the code seen here.

Elemen­ts

Web­sites are made up of ele­ments that can be put side-by-side or one with­in an­oth­er. As an ex­am­ple, the para­graph ele­ments are:

<p>This is a text paragraph with some content<p>

If we wan­ted to write two para­graphs, we could do it like this:

<p>First paragraph with some text</p>
<p>Second paragraph with some more text</p>

Also, if we wan­ted a para­graph with some bold text <strong> ... </strong> we could do it like this:

<p>A paragraph with <strong>important text</strong> and some more</p>

All web­sites are made of ele­ments in­side other ele­ments. You can see a visualiza­tion of it in Libre Uni­vers­ity here:

Separat­ing each part of the web­site into blocks, and each block into small­er blocks helps us giv­ing styles to the ele­ments, some­th­ing that we will see later. There are many kind of ele­ments. Let's see just a few (some of the most common ones):

<h1> ... </h1> , <h2> ... </h2> , ... headers for text (titles)

<p> ... </p> a para­graph

<strong> ... </strong> bold text

<em> ... </em> italic text

<a> ... </a> a link

<button> ... </button> a but­ton

<img> an image (note no clos­ing tag)

<div> ... </div> a di­vision

... many more

Re­memb­er that most of the ele­ments need to be closed (but not all). HTML ele­ments have the fol­low­ing struc­ture:

Let's see all of this with a small example. Let's say that we want to write a blog article. Copy/paste this in the template we saw initially to try it out:

<h1>Libre University</h1>
<p>This is a page to <strong>learn and teach</strong>. You can find many topics as:</p>
<ol>
  <li>Web Programming</li>
  <li>Web Programming</li>
  <li>Web Programming</li>
</ol>

<p><em>Ooops...</em> so far we only have web programming. Sorry!</p>

<p>Visit <a href="http://en.libre.university/">Libre University</a> again tomorrow</p>

So far we have seen what are HTML ele­ments and that they have an op­en­ing tag, some con­tent and a clos­ing tag. The con­tent might be just text, an­oth­er HTML ele­ment or both. We can and should put ele­ments in­side other ele­ments.

Ex­erc­ise: create your own small blog entry with what you did yes­terday, in­clud­ing a title (<h1>) and some para­graphs (<p>) with bold text (<strong>), italic text (<em>) and links (<a>) if you want to chal­lenge your­self (ex­plained later).

Ex­erc­ise: create a shopp­ing list with the items you want to buy. For this, you might have to Goog­le how to create a list of items. Googl­ing cor­rect­ly is an every­day skill that every pro­gramm­er should know.

Attributes

In the schema of the ele­ments we've seen there's some­th­ing cal­led attributes. Every­th­ing out­side <...> can be seen on the page, so we need a way to add extra in­for­ma­tion like where to go when a user clicks a link.

A link has some text and a url to go, but you can only see the text. The url is saved in an attribute cal­led href. To see it bet­t­er, this is how you can de­fine a link <a>:

<a href="https://en.libre.university/">Libre University</a>

If we open this with a brows­er, it would look this way: Libre Uni­vers­ity

An­oth­er attribute could be the one used for im­ages. To add an image to a web­site we use the elemen­t <img>. This is not a norm­al ele­ment, since it doesn't have con­tent and therefore it doesn't have clos­ing tag (called a void element). To add the image, we'll use the at­tribute cal­led src:

<img src="/logo.svg">

This attribute is the one used in Mak­ers UPV to display the logo.

Ex­erc­ise: add a but­ton with the text "Goog­le" that takes you to Goog­le when clic­ked.

Di­visions <div> and clas­ses class=""

Now that you know the basics of HTML, there's an ele­ment and attribute with speci­al mean­ing. The ele­ment is <div> , which re­present di­vis­ions but it's nor­mal­ly used when there's no bet­t­er ele­ment avail­able. For in­stan­ce, if you want to set up sever­al im­ages be­side each other, you'll pro­bab­ly need an ele­ment to con­tain them all:

<div>
  <img src="gallery1.jpg">
  <img src="gallery2.jpg">
  <img src="gallery3.jpg">
</div>

However, if we added this to a website it wouldn't look as expected. They would be one on the top of another, and each one with their original size.

Classes are a special attribute with a special meaning. They go into an element and define what element they are. Let's see it with the previous example, an image gallery:

<div class="flex">
  <div><img src="gallery1.jpg"></div>
  <div><img src="gallery2.jpg"></div>
  <div><img src="gallery3.jpg"></div>
</div>

Here we de­fine the type of row. Clas­ses are rea­l­ly use­ful as we'll use them as a re­fer­ence to add style to the ele­ments. With the ex­am­ple above, the li­bra­ry Pic­nic CSS de­fines that the class flex has the ele­ments in­side it equally spaced:

Ex­am­ple [jsfiddle]

Ex­erc­ise: use the ele­ment but­ton from Pic­nic CSS in three dif­ferent ways.

Inspect a live website

You can see the HTML (and CSS and Javascript) of any website in the world. The HTML is the easiest one and the one we know so far. To see the code of any website, go to the page with Firefox/Chrome and press "F12" (or right click => Inspect element):

Here we can see the website on the top, the html of the current website on the bottom left and the style (we'll see them in the next chapter) on the right. The most famous websites normally use some automatic system which makes the HTML difficult to read, so I recommend checking simple sites first.

Exercise: it's time to explore. Create your own simple website and inspect others. Go wild here, just try them all to get a feeling of it. When you are comfortable writing the basic tags shown in the list above continue with the CSS chapter.